<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <span style="font-size: 19px;font-weight: 600">新增物资</span><br>
  </div>

  <div class="workContent">
    <div class="workCard">
      <a-form
          :model="goodsInfo"
          name="basic"
          ref="formRef"
          :label-col="{ span: 9 }"
          :wrapper-col="{ span: 5}"
          autocomplete="off"
          @finish="addGoodsInfo"
      >
        <a-form-item
            label="姓名"
            name="donor"
        >
          <a-input v-model:value="goodsInfo.donor" placeholder="匿名" />
        </a-form-item>

        <a-form-item
            label="电话"
            name="phone"
        >
          <a-input v-model:value="goodsInfo.phone" placeholder="匿名" />
        </a-form-item>

        <a-form-item
            label="物资名称"
            name="goodsName"
            :rules="[{ required: true, message: '请输入物资名称!' }]"
        >
          <a-input v-model:value="goodsInfo.goodsName" />
        </a-form-item>

        <a-form-item
            label="数量"
            name="count"
            :rules="[{ required: true, message: '请输入物资数量!' }]"
        >
          <a-input-number v-model:value="goodsInfo.count" :min="1" style="width: 100%;" />
        </a-form-item>

        <a-form-item
            label="单位"
            name="unit"
            :rules="[{ required: true, message: '请输入单位!' }]"
        >
          <a-select v-model:value="goodsInfo.unit" placeholder="please select your zone">
            <a-select-option v-for="item in dictList" :value="item.dictId">{{item.dictValue}}</a-select-option>
          </a-select>
        </a-form-item>


        <a-form-item :wrapper-col="{ offset: 9, span: 12 }">
          <a-button type="primary" html-type="submit">确认</a-button>&nbsp;&nbsp;
          <a-button type="default" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {addGoods, getDict} from "@/utils/file";
import {message} from "ant-design-vue";

const goodsInfo = reactive({
  donor: '',
  count: 1,
  goodsName: '',
  phone: '',
  unit: '',
})

const dictList = ref([])

getDict('unit').then(res => {
  if (res.status == 200)
  dictList.value = res.data.data
})

const formRef = ref();
const addGoodsInfo = function (){
  let material = {
    donor: goodsInfo.donor === '' ? '匿名用户' : goodsInfo.donor,
    count: goodsInfo.count,
    goodsName: goodsInfo.goodsName,
    phone: goodsInfo.phone,
    unit: goodsInfo.unit,
  }
  addGoods(material).then(res => {
    if (res.status == 200){
      message.success('新增成功')
      resetForm()
    }else{
      message.error('新增失败')
    }
  })

}

const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<style scoped>
.workContent{
  width: 96%;margin: 25px auto;
  background-color: #FFFFFF;
  padding: 50px;
}

.workCard{
}
</style>